<template>
  <el-dialog
    title="添加签署方"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    class="sign-dialog"
    width="800px"
  >
    <div class="sign-main">
      <el-form
        :inline="true"
        :model="signdataForm"
        ref="signdataForm"
        size="mini"
        label-width="70px"
        label-position="left"
        class="sign-com-form"
      >
        <div class="sign-block sign-enterprise">
          <div class="sign-icon">我的企业</div>
          <div class="sign-content">
            <!-- 企业 -->
            <div class="sign-com-name">{{ enterprise.RoleName }}</div>
            <div class="sign-com-form">
              <el-form-item
                label="经办人"
                prop="enterpriseName"
                :rules="{ required: true, message: '请选择经办人', trigger: 'change' }"
              >
                <el-select v-model="signdataForm.enterpriseName" @change="changeEnterpriseName" placeholder="经办人">
                  <el-option
                    v-for="item in listData"
                    :key="item.UserId"
                    :label="item.DisplayName"
                    :value="item.UserId"
                    class="infinite-list"
                    v-infinite-scroll="load"
                  >
                    <div class="list-cell">
                      <div class="list-item">{{ item.DisplayName }}</div>
                      <div class="list-item">{{ item.Mobile }}</div>
                    </div>
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="手机号" prop="enterpriseMobile">
                <el-input v-model="signdataForm.enterpriseMobile" placeholder="手机号" disabled></el-input>
              </el-form-item>
            </div>
          </div>
        </div>
        <div class="sign-block sign-individual">
          <div class="sign-icon">个人</div>
          <div class="sign-content">
            <!-- 个人签署方 -->
            <div class="sign-com-name">{{ individual.RoleName }}</div>
            <div class="sign-com-form">
              <div class="sign-com-form-header">
                <div class="sign-com-form-cell">合同名称</div>
                <div class="sign-com-form-cell">姓名</div>
                <div class="sign-com-form-cell">手机号</div>
              </div>
              <div v-for="(cell, i) in signdataForm.persons" :key="i">
                <el-form-item label="" :prop="`persons[${i}].contractName`">
                  <el-input v-model="signdataForm.persons[i].contractName" placeholder="合同名称"></el-input>
                </el-form-item>
                <el-form-item
                  label=""
                  :prop="`persons[${i}].name`"
                  :rules="{ required: true, message: '姓名不能为空', trigger: 'blur' }"
                >
                  <el-input v-model="signdataForm.persons[i].name" placeholder="姓名"></el-input>
                </el-form-item>
                <el-form-item
                  label=""
                  :prop="`persons[${i}].mobile`"
                  :rules="{ required: true, message: '手机号不能为空', trigger: 'blur' }"
                >
                  <el-input v-model="signdataForm.persons[i].mobile" placeholder="手机号"></el-input>
                </el-form-item>
                <el-form-item class="sign-form-btns">
                  <i class="el-icon-circle-plus-outline" @click="addIndividual"></i>
                  <i class="el-icon-remove-outline" v-if="i > 0" @click="removeIndividual(i)"></i>
                </el-form-item>
              </div>
            </div>
          </div>
        </div>
        <el-form-item class="dialog-footer">
          <el-button size="medium" @click="onClose">取 消</el-button>
          <el-button size="medium" type="primary" @click="onSubmit('')">确定发起</el-button>
          <!-- <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button> -->
        </el-form-item>
      </el-form>
    </div>
    <!-- <span slot="footer" class="dialog-footer">
      <el-button @click="onClose">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
    </span> -->
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex';
import { getList } from '@common/api/staff';

export default {
  name: 'sign-dialog',
  props: {
    visible: {
      type: Boolean,
      default() {
        return false;
      },
    },
    recipients: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  computed: {
    ...mapGetters(['name', 'orgname']),
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit('toggle-dialog', val);
      },
    },
  },
  data() {
    return {
      listData: [],
      istLoading: false,
      total: 0,
      currentPage: 1,
      pageSize: 10,
      signdataForm: {
        enterpriseName: '',
        enterpriseMobile: '',
        persons: [
          {
            key: Date.now() - 1,
            contractName: '',
            name: '',
            mobile: '',
          },
        ],
      },
      enterprise: { RoleName: '' },
      individual: { RoleName: '' },
    };
  },
  watch: {
    recipients: {
      handler(newData) {
        newData?.forEach(item => {
          if (item?.RecipientType === 'ENTERPRISE') {
            this.enterprise = item;
          }
          if (item?.RecipientType === 'INDIVIDUAL') {
            this.individual = item;
          }
        });
        console.log('watch recipients', this.enterprise, this.individual);
      },
      immediate: true,
      deep: true,
    },
  },
  created() {
    // 获取用户列表
    this.fetchUserData();
  },
  methods: {
    // 获取列表
    fetchUserData() {
      this.listLoading = true;
      getList({
        Limit: this.pageSize,
        Offset: (this.currentPage - 1) * this.pageSize,
      })
        .then(response => {
          this.listData = response?.data?.Employees?.filter(f => f.UserId);
          this.listLoading = false;
          this.total = response.data.TotalCount;

          // 设置表单默认值 // 设置默认经办人
          const curUser = this.listData.filter(f => f.DisplayName === this.name);
          this.signdataForm.enterpriseName = curUser?.[0]?.DisplayName;
          this.signdataForm.enterpriseMobile = curUser?.[0]?.Mobile;
        })
        .catch(() => {
          this.listLoading = false;
        });
    },

    // 加载更多
    load() {
      if (this.total > this.currentPage * this.pageSize) {
        this.currentPage += 1;
        this.fetchData();
      }
    },

    changeEnterpriseName(value) {
      const selected = this.listData.filter(f => f.UserId === value);
      this.signdataForm.enterpriseMobile = selected[0]?.Mobile;
    },
    // 新增
    addIndividual() {
      this.signdataForm.persons.push({
        key: Date.now(),
        contractName: '',
        name: '',
        mobile: '',
      });
      console.log('this.signdataForm.persons', this.signdataForm.persons);
    },

    // 删除
    removeIndividual(index) {
      this.signdataForm.persons.splice(index, 1);
    },

    // 关闭弹框
    onClose() {
      // 重置表单
      this.$refs.signdataForm.resetFields();
      const defaultPersons = [
        {
          key: Date.now() - 1,
          contractName: '',
          name: '',
          mobile: '',
        },
      ];
      this.$set(this.$refs.signdataForm, 'persons', defaultPersons);
      this.$emit('toggleDialog', false);
    },

    onSubmit() {
      this.$refs.signdataForm.validate(valid => {
        if (!valid) {
          return false;
        }
        this.$emit('approvers', this.signdataForm);
      });
      console.log('this.signdataForm.persons', this.signdataForm);
    },
  },
};
</script>

<style lang='scss' scoped>
.sign-main {
  position: relative;
  .sign-block {
    border-radius: 4px;
    border: 1px solid #fff;
    background: #f4f6f9;
    padding: 16px 8px 16px 16px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    .sign-icon {
      border-radius: 4px;
      font-size: 10px;
      width: 32px;
      height: 32px;
      background: #ccc;
      color: #fff;
      margin-right: 8px;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-shrink: 0;
      line-height: 14px;
    }
    .sign-content {
      flex: 1;
      margin-left: 4px;
      .sign-com-form {
        margin-top: 16px;
        .sign-com-form-header {
          position: relative;
          top: -7px;
          display: flex;
          width: 544px;
          line-height: 30px;
          .sign-com-form-cell {
            flex: 1;
          }
        }
        .el-form-item {
          margin-bottom: 10px;
          & + .el-form-item {
            margin-left: 10px;
          }
        }
        .sign-form-btns {
          margin-left: 0 !important;
        }
      }
      .el-icon-circle-plus-outline,
      .el-icon-remove-outline {
        position: relative;
        z-index: 9;
        margin-left: 14px;
        font-size: 26px;
        color: rgb(0, 110, 255);
        cursor: pointer;
      }
    }
  }
  .sign-enterprise {
    margin-bottom: 20px;
    background-color: rgba(0, 110, 255, 0.1);
    .sign-icon {
      background-color: rgb(0, 110, 255);
    }
  }
  .sign-individual {
    background-color: rgba(234, 181, 53, 0.1);
    .sign-icon {
      background-color: rgb(234, 181, 53);
    }
  }
}
.dialog-footer {
  position: relative;
  width: 100%;
  margin-top: 20px;
  text-align: right;
}

.infinite-list {
  max-height: 300px;
  overflow-x: hidden;
  overflow-y: auto;
  .list-cell {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .list-item {
      display: inline-block;
      line-height: 30px;
      padding: 5px;
      &:last-child {
        color: #8492a6;
      }
    }
  }
}
</style>
